<template>
  <div class="box">
    <el-card class="box-card">
      <div v-for="(item, index) in o" :key="index" :class="ind == index ? 'textitem' : 'active'" @click="Tabs(index)">
        {{ item }}
      </div>
    </el-card>
    <el-card class="box-card2">
      <div v-show="ind == 0">
        <h4>基本信息</h4>
        <div class="inpbox">
          <p class="ppp">
            运输任务编号:
            <el-input v-model="input" disabled class="kdyInp" />
            车牌号码:
            <el-input v-model="input" disabled class="kdyInp" />
          </p>
          <p class="ppp2">
            调度机构:
            <el-input v-model="input" disabled class="kdyInp" />
            起始地:
            <el-input v-model="input" disabled class="kdyInp2" />
          </p>
          <p class="ppp2">
            目的地:
            <el-input v-model="input" disabled class="kdyInp2" />
          </p>
        </div>
        <el-button class="back" @click="goback">返回</el-button>
      </div>
      <div v-show="ind == 1">
        <h4>任务轨迹</h4>
        <div class="inpbox">
          <p class="ppp2">
            车牌号:
            <el-input v-model="input" disabled class="kdyInp" />
            司机:
            <el-input v-model="input" disabled class="kdyInp" />
          </p>
          <p class="ppp">
            计划发车时间:
            <el-input v-model="input" disabled class="kdyInp" />
            实际发车时间:
            <el-input v-model="input" disabled class="kdyInp" />
          </p>
          <p class="ppp">
            计划达到时间:
            <el-input v-model="input" disabled class="kdyInp" />
            实际达到时间:
            <el-input v-model="input" disabled class="kdyInp" />
          </p>
        </div>
        <el-button class="back" @click="goback">返回</el-button>
      </div>
      <div v-show="ind == 2">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="70px" />
          <el-table-column prop="date" label="运单编号" />
          <el-table-column prop="name" label="下单时间" />
          <el-table-column prop="name" label="发件人姓名" />
          <el-table-column prop="name" label="发件人电话" />
          <el-table-column prop="name" label="发件人地址" />
          <el-table-column prop="name" label="货品数量" />
          <el-table-column fixed="right" label="操作" width="140px">
            <template #default>
              <el-button link type="primary" size="small" @click="Jumpxq">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="back" @click="goback">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
let ind = ref(0);
let input = ref('123123132');
const tabPosition = ref("left");
const options = [
  {
    value: "待发车",
    label: "待发车",
  },
  {
    value: "在途",
    label: "在途",
  },
  {
    value: "已到达",
    label: "已到达",
  },
];
const tableData = [
  {
    id: "1",
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "2",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "3",
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "4",
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const o = ["基本信息", "任务轨迹", "运单详情", "交付照片", "提货照片"];
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const Jumpxq = () => {

}

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const goback = (val: number) => {
  router.push({ path: "/home/ysrwgl" });
};
const Tabs = (index) => {
  ind.value = index;
};
</script>

<style scoped>
.box {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.back {
  margin-top: 30px;
  margin-left: 45%;
}

.text {
  font-size: 14px;
}

.textitem {
  margin-bottom: 30px;
  color: hotpink;
}

.active {
  margin-bottom: 30px;
}

.inpbox {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #000;
}

.ppp {
  margin-top: 8px;
  margin-left: 20px;
  margin-bottom: 30px;
}

.ppp2 {
  margin-top: 8px;
  margin-left: 52px;
  margin-bottom: 30px;
}

.kdyInp {
  width: 200px;
  margin-left: 10px;
  margin-right: 100px;
}

.kdyInp2 {
  width: 200px;
  margin-left: 10px;
  margin-right: 30px;
}

.box-card {
  width: 13%;
}

.box-card2 {
  /* height: 800px; */
  height: calc(100vh - 110px);
  margin-left: 20px;
  /* margin-top: 20px; */
  width: 90%;
}
</style>